<template>
	<view class="content">
		<view class="card-wrap">
			<view class="card">
				<image class="card-img" mode="widthFix" :src="membershipCard.imgUrl"></image>
				<view class="card-type" v-if="membershipCard.type"><text>￥</text><text>{{membershipCard.type}}</text></view>
				<view class="card-time" v-if="membershipCard.time">{{membershipCard.time}}</view>
			</view>
		</view>
		<view class="member-title">
			会员权益
		</view>
		<view :class="{list:true,'special':membershipCard.id!=2}">
			<view class="item">
				<image mode="widthFix" :src="membershipCard.list1Img"></image>
				<view class="item-title">{{membershipCard.list1Title}}</view>
				<view class="item-content">{{membershipCard.list1Content}}</view>
			</view>
			<view class="item" v-if="membershipCard.id==2">
				<image mode="widthFix" :src="membershipCard.list2Img"></image>
				<view class="item-title">{{membershipCard.list2Title}}</view>
				<view class="item-content">{{membershipCard.list2Content}}</view>
			</view>
			<view class="item">
				<image mode="widthFix" :src="membershipCard.list3Img"></image>
				<view class="item-title">{{membershipCard.list3Title}}</view>
				<view class="item-content">{{membershipCard.list3Content}}</view>
			</view>
		</view>
		<view class="remark" v-if="membershipCard.tips">
			 {{membershipCard.tips}}
		</view>
		<view class="checkbox">
			<u-checkbox width="150rpx" v-model="checked" shape="circle" active-color="#0da297">点击确认并同意</u-checkbox>
			<text @click="handleLinkClick" class="checkbox-link">《会员卡权益》</text>
		</view>
		<guarantee />
		<view class="btn">
			<uv-btn :loading="loading" shape="circle" @click="handlePayClick" text="确认开通" loading-text="支付中..."></uv-btn>
		</view>
		<view class="bottom-safe-area"></view>
		<!--单悬浮客服-->
		<common-drag />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				membershipCard:{
				},
				loading:false,
				checked:false,
				//from值为1,2,3,4,5
				from:'',
			}
		},
		onLoad(options){
			if(options.from){
				this.from=options.from;
			};
			this.getDataRequest();
		},
		methods: {
			getDataRequest(){
				this.$u.api.getMemberRecharge().then(res=>{
					if(res.result_code=='300'){
						let membershipCard={
							imgUrl:this.$imgUrl+'member/vip-01.png',
							type:res.data.member_money/100,
							time:res.data.effective_date,
							list1Img:'https://api.cd1a.cn/imges/free_.png',
							list1Title:res.data.descript_one_1,
							list1Content:res.data.descript_one_2,
							list2Img:'https://api.cd1a.cn/imges/vvip_.png',
							list2Title:res.data.descript_two_1,
							list2Content:res.data.descript_two_2,
							list3Img:'https://api.cd1a.cn/imges/three_.png',
							list3Title:res.data.descript_three_1,
							list3Content:res.data.descript_three_2,
							id:res.data.card_id,
							tips:res.data.key_point,
						};
						this.membershipCard=membershipCard;
					}else{
						this.$utils.toast(res.msg);
					};
				}).catch(()=>{
				
				});
			},
			//common benefits page
			handleLinkClick(){
				//state: 区分是分月卡点击去的权益页面还是会员卡去的;
				uni.navigateTo({
				    url: '/pages/member/benefits?state=2&id='+this.membershipCard.id
				});
			},
			handlePayClick(){
				//verify checked
				if(this.checked){
					this.paymentRequest();
				}else{
					this.$utils.toast('请您先同意会员协议');
				};
			},
			paymentRequest(){
				this.loading=true;
				//After sending the request successfully
				//1.wechat pay：
				uni.login({
					provider: 'weixin',
					success:ret=>{
						//create order
						this.$u.api.commonPay({
							
							code:ret.code,
							member:2,
							fee:this.membershipCard.type*100,
						}).then(res=>{
							
							if(res.result_code=='314'){
								let resOrderId=res.data.order_id;
								let tradeNO=res.data.trade_no;//支付宝支付需要的tradeNO
								if(resOrderId){
									
									uni.requestPayment({
										//微信
										// #ifdef	MP-WEIXIN
										provider: 'wxpay',
										timeStamp: res.data.timeStamp,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										signType: 'MD5',
										paySign: res.data.paySign,
										// #endif
										//支付宝
										// #ifdef	MP-ALIPAY
										provider: 'alipay',
										orderInfo:tradeNO,
										// #endif
										success: (resultData)=>{
											
											// #ifdef	MP-ALIPAY
											if(resultData?.resultCode==6001 || resultData?.resultCode==6002){
												//Payment failed 弹窗
												this.$utils.modal({
													title:'提示',
													content:'支付失败',
													showCancel:false,
													callback:(bool)=>{
														this.loading=false;
													}
												});
												return false;
											};
											// #endif
											
											
											//Check if payment is successful
											this.$u.api.checkPaymentSuccess({
												order_id:resOrderId,
												
											}).then((retu)=>{
												
												if(retu.result_code=='300'){
													//payment successful
													let from=this.from;
													if(from=='1' || from=='2'){
														//开启端口
														this.$u.api.portOpen({
															str:uni.getStorageSync('mainStr'),
															
														}).then(result=>{
															if(result.result_code=='300'){
																this.loading=false;
																//运维电话
																this.$u.vuex('maintain_phone',result.data.operator_phone);
																//更新
																uni.setStorage({
																	key: 'coreData',
																	data:result.data,
																	success:()=>{
																		//set isRefresh cache
																		uni.setStorageSync('isRefresh',1);
																		if(from=='1'){
																			this.$utils.back();
																		}else if(from=='2'){
																			this.$utils.back(2);
																		};
																		
																	}
																});
															}else{
																this.$utils.modal({
																	title:'提示',
																	content:result.msg,
																	showCancel:false,
																	callback:(bool)=>{
																		this.loading=false;
																	}
																});
															};
														}).catch(()=>{
															this.loading=false;
														});
													}else if(from=='3'){
														//关闭当前页面跳转至卡卷列表页面
														uni.redirectTo({
															 url:"/pages/member/card"
														});
														this.loading=false;
													};
												}else{
													this.$utils.modal({
														title:'提示',
														content:retu.msg,
														showCancel:false,
														callback:(bool)=>{
															this.loading=false;
														}
													});
												};
											}).catch(err=>{
												this.loading=false;
											});

										},
										fail:()=>{
											//Payment failed
											this.$utils.modal({
												title:'提示',
												content:'支付失败',
												showCancel:false,
												callback:(bool)=>{
													this.loading=false;
												}
											});
										}
									});
								};
							}else{
								
								this.$utils.modal({
									title:'提示',
									content:res.msg,
									showCancel:false,
									callback:(bool)=>{
										this.loading=false;
									}
								});

							};
						}).catch(()=>{
							this.loading=false;
						});
						
					}
				});

				//2.alipay
				// uni.requestPayment({ 
				// 	provider: 'alipay',
				// 	orderInfo: 'orderInfo', // ==tradeNO
				// 	success: function (res) {
				// 		console.log('success:' + JSON.stringify(res)); 
				// 	}, 
				// 	fail: function (err) { 
				// 		console.log('fail:' + JSON.stringify(err)); 
				// 	} 
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 40rpx;
	}
	.card-wrap{
		padding:30rpx;
		border-bottom:2rpx solid #E5E5E5;
	}
	.card{
		position:relative;
	}
	.card-img{
		width:100%;
		height:400rpx;
		display: block;
	}
	.card-type{
		position:absolute;
		right:40rpx;
		top:30rpx;
		line-height: 1;
	}
	.card-type text:nth-child(1){
		font-size: 30rpx;
		color: #9B8442;
		
	}
	.card-type text:nth-child(2){
		font-size: 60rpx;
		color: #9B8442;
	
	}
	.card-time{
		position:absolute;
		left:30rpx;
		bottom:30rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #998443;
	}
	.member-title{
		width:160rpx;
		text-align: center;
		margin:60rpx auto 60rpx auto;
		line-height: 1;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		border-left:6rpx solid #0DA297;
		border-right:6rpx solid #0DA297;
	}
	.list{
		display: flex;
		justify-content: space-between;
		align-items:flex-start;
		padding:20rpx 30rpx;
		text-align: center;
	}
	.item{
		width:190rpx;
	}
	.item image{
		width:100rpx;
		height:100rpx;
		vertical-align: middle;
	}
	.item-title{
		font-size: 26rpx;;
		font-weight: bold;
		color: #333333;
		padding:14rpx 0;
	}
	.item-content{
		font-size: 24rpx;;
		color: #666666;
	}
	.btn{
		padding:0 30rpx;
	}
	.remark{
		padding:20rpx 30rpx 40rpx 30rpx;
		font-size: 24rpx;
		font-weight:bold;
		color: #E10D26;
		text-align: center;
	}
	.checkbox-link{
		position:relative;
		left:-18rpx;
		font-size:30rpx;
		color:#0DA297;
		vertical-align: middle;
		
	}
	.checkbox{
		text-align: center;
		margin-bottom: 40rpx;
	}
	.list.special{
		padding-left:80rpx;
		padding-right:80rpx;
	}
</style>

